<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue-2.6.12.js"></script>
</head>
<style type="text/css">
  .red_bg{
    background: red;
  }
  .green_bg{
    background: green;
  }
</style>
<body>

<div id="app">
<!-- 如果要为属性赋值(绑定数据) 不能使用插值表达式 -->
  <div v-bind:class="class_name">背景样式</div>
  
<!--  v-bind的语法糖 可以直接在属性前面加":" -->
  <div :class="class_name">背景样式</div>
  
  <button type="button" @click="changeRed">红</button>
  <button type="button" @click="changeGreen">绿</button>
  


</div>


<script >

  let app = new Vue({

    el:"#app",
    data:{
      class_name:""
    },
    methods:{
      changeRed(){
        this.class_name = "red_bg"
      },
      changeGreen(){
        this.class_name = "green_bg"
      }
    }


  })

</script>

</body>
</html>